<template>
  <x-table
    ref="table"
    :fetch="fetchTable"
    :childrenFetch="childrenFun"
    :height="height"
    :page-size="pageSize"
    :columns="columns"
    :childrenColums="childrenColums"
    :tableRowClass="tableRowClassName"
  >
    <!-- <template #default="scope">
      <div v-if="scope.column.label === '年龄'">{{ scope.row.age }}岁</div>
      <div v-else-if="scope.column.label === '性别'">
        <el-tag>{{ scope.row.sex }}</el-tag>
      </div>
    </template> -->
  </x-table>
</template>
<script setup>
import xTable from '../components/Xtable.vue'
import { ref } from 'vue'

const height = ref(window.innerHeight - 200)

const columns = ref([
  { label: '#', type: 'expand' },
  { name: 'name', label: '姓名', width: 300 },
  { name: 'age', label: '年龄', width: 300 },
  { name: 'sex', label: '性别', width: 300 }
])
const childrenColums = ref([
  { name: 'address', label: '地址' },
  { name: 'school', label: '学校' }
])

const table = ref(null)
const search = ref('')
// 接口数据获取
const fetchTable = async (page) => {
  var params = {
    page: page.pageIndex,
    limit: page.pageSize,
    search: search.value
  }
  const res = await getDataList(params)
  return res
}

const childrenFun = async (id) => {
  const res = await getDataListChildren(id)
  console.log(res)
  return res
}

// 模拟接口
const getDataListChildren = (id) => {
  var promise = new Promise(function (resolve, reject) {
    var data = {
      list: [
        { id: 1, address: '湖南省永州市XXX', school: 'XXX' },
        { id: 2, address: '湖南省长沙市XXX', school: 'XXX' }
      ],
      total: 2
    }
    resolve(data)
  })
  return promise
}

const getDataList = (params) => {
  var promise = new Promise(function (resolve, reject) {
    var data = {
      list: [
        { id: 1, name: '张三', age: 24, sex: '男' },
        { id: 2, name: '李四', age: 25, sex: '男' },
        { id: 3, name: '周末', age: 26, sex: '男' },
        { id: 4, name: '周六', age: 27, sex: '男' },
        { id: 5, name: '周日', age: 28, sex: '男' }
      ],
      total: 6
    }
    resolve(data)
  })
  return promise
}

// 每行颜色
const tableRowClassName = ({ row, rowIndex }) => {
  if (row.age > 25) {
    return 'warning-row'
  } else {
    return 'danger-row'
  }
}
</script>

<style>
.warning-row {
  color: red;
}
.danger-row {
  color: greenyellow;
}
</style>
